import React, {useCallback} from 'react';
import {Link} from 'react-router-dom';
import { connect } from 'react-redux';
import { Button } from 'antd';
import UserList from '../../components/UserList';

const Index = (props) => {

    const { count, userId, userList } = props.reduxState;

    const handleClick = () => {
        console.log('出发')
        const {dispatch} = props;
        const { count } = props.reduxState;
        dispatch({
            type: 'SET_NUMBER',
            payload: {
                acount: count + 1
            }
        })
    }

    const AddCustomer = () => {
        const {dispatch} = props;
        dispatch({
            type: 'SET_HOME_USER',
            payload: {
                name: `玛卡巴卡${parseInt(Math.random()*10000)}`,
                age: parseInt(Math.random()*10000),
                address: '西湖区湖底公园1号',
                key: parseInt(Math.random()*10000)
            }
        })
    }

    const DeleteDemo = useCallback((state) => {
        console.log('index++++', state)
    }, [])
    
    return (
        <div>
            <Link to="/detail/993">详情</Link><br />
            <Link to="/center">中心-</Link>
            <Button onClick={handleClick} type="primary">+ 1</Button><br />
            <Button type="warning">{count}</Button>
            <Button type="warning" onClick={AddCustomer}>Table添加元素</Button>
            <UserList dataSource={userList} deleteDemo={DeleteDemo}/>
        </div>
    )
}

export default connect((state) => ({
    reduxState: state.HomeStateReducer
}))(Index);